import './App.scss';
import Routers from "./router/index";
import {useLocation} from "react-router-dom";
import {Button, Form, Input, message} from "antd";
import Header from "./components/Header";
import MyMenu from "./components/Menu";
import {login} from "./api";
import {AxiosResponse} from "axios";
import Cookies from "js-cookie";
import {Suspense} from "react";
import Loading from "./components/Loading";

function App() {
    const {pathname} = useLocation();
    return (
        <div className="box">
            {
                pathname === "/" ?
                    <div className="login-box">
                        <Login/>
                    </div>
                    :
                    <div className="main">
                        <Header/>
                        <div className="main-left">
                            <MyMenu/>
                        </div>
                        <div className="main-right">
                            {/*预加载前渲染loading組件*/}
                            <Suspense fallback={<Loading/>}>
                                <Routers/>
                            </Suspense>
                        </div>
                    </div>
            }
        </div>
    )
}

export default App;

// 登录组件
const Login = () => {
    // 输入完成
    const onFinish = (v: { username: string, password: string }) => {
        login(v).then(async (r: AxiosResponse) => {
            const {token} = r.data.data.data;
            Cookies.set("token", token);
            window.location.href = "/home";
            await message.success("登录成功");
        }, err => message.error(err))
    }

    return (
        <div className="login-main">
            <Form
                labelCol={{span: 8}}
                wrapperCol={{span: 16}}
                style={{maxWidth: 600}}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item
                    label="账号"
                    name="username"
                    rules={[{required: true, message: '请输入账号'}]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{required: true, message: '请输入密码'}]}
                >
                    <Input.Password/>
                </Form.Item>

                {/*<Form.Item name="remember" valuePropName="checked" wrapperCol={{offset: 8, span: 16}}>*/}
                {/*    <Checkbox>记住密码</Checkbox>*/}
                {/*</Form.Item>*/}

                <Form.Item wrapperCol={{offset: 10}}>
                    <Button type="primary" style={{marginRight: "10px"}} htmlType="submit">
                        提交
                    </Button>
                    <Button type="primary" htmlType="reset">
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}